<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
			list-style: none;
		}

		.indexes {
			position: fixed;
			right: 5px;
			top: calc(50% - 100px);
			height: 200px;
			width: 16px;
		}

		.indexes li {
			width: 12px;
			height: 12px;
			border: 2px solid #fff;
			border-radius: 50%;
			margin-top: 5px;
			cursor: pointer;
		}

		.indexes li.active {
			background: #fff;
			box-shadow: 1px 1px 20px #fff;
		}

		.indexes li:hover {
			background: #fff;
			box-shadow: 1px 1px 20px #fff;
		}
	</style>
</head>

<body style="overflow: hidden;">

	<div class="container" style="transition: all 1s;">
		<div class="item" style="background: red;"></div>
		<div class="item" style="background: orange;"></div>
		<div class="item" style="background: pink;"></div>
		<div class="item" style="background: blue;"></div>
	</div>

	<ul class="indexes">

	</ul>

	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/simba.extend-jq.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
			//这里可以用100vh，为了展示JS获取宽高写法
			var screenHeight = $(window).height();
			$(".item").css("height", screenHeight + "px");

			for (var i = 0; i < $(".item").length; i++) {
				$(".indexes").append(`<li></li>`)
			}
			$(".indexes li").first().addClass("active");

			$(".indexes li").hover(function () {
				//设置为当前li的索引
				index = $(this).index();
				change(index);
			})

			var index = 0;

			function check(isdown) {

				if (isdown && index === $(".item").length - 1) {
					//console.log("到底了")
					return false;
				}

				if (!isdown && index === 0) {
					//console.log("到顶了")
					return false;
				}

				return true;
			}

			var end = new Date();
			$(window).mousescroll(function (isdown) {
				//如果两次间隔超过 800ms，说明是两次操作
				if (new Date() - end > 800) {
					//没到头，还能动
					if (check(isdown)) {
						//如果向下，则index++，向上则index--
						isdown ? index++ : index--;
						//执行切换
						change(index);
					}
					//记录结束时间
					end = new Date();
				}
			});

			function change(index) {
				//执行切换  如果需要横着动，可以改成translateX:100vw
				$(".container").css("transform", `translateY(${-index * screenHeight}px)`)
				//切换索引样式
				$(".indexes li").eq(index).addClass("active").siblings().removeClass("active");
			}

		})
	</script>
</body>

</html>